<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>    
    <title>TitleLogo.arc</title>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="../../styles.css" rel="stylesheet">
    <link rel="icon" href="../../images/icon.png">
	</head>
	<body>
		<div id="top">
      <h1>TitleLogo.arc</h1> 
		</div>
    <div id="main">
      <h2>Contenido</h2>
      <div class="contents">
        <ol>
          <li><a href="#tools">Herramientas</a></li>
          <li><a href="#info">Informaci&oacute;n</a></li>
        </ol>
      </div>
      <h2 id="tools">Herramientas</h2>
      <div class="contents">
        <ul>
          <li>WiiExplorer</li>
          <li>wimgt</li>
          <li>GIMP (sugerencia para editar imagenes PNG)</li>
        </ul>
      </div>      
      <h2 id="info">Informaci&oacute;n</h2>
      <div class="contents">
        <p><code>TitleLogo.arc</code> es un archivo muy especial localizado en la carpeta <code>LayoutData</code>. Contiene las imagenes (<a href="https://wiki.tockdom.com/wiki/TPL_(File_Format)">TPL</a>) y animaciones (<a href="https://wiki.tockdom.com/wiki/BRLAN_(File_Format)">BRLAN</a>) usadas por el logo de SMG en la pantalla de inicio. Todas mostradas segun los contenidos del archivo de dise&ntilde;o (<a href="https://wiki.tockdom.com/wiki/BRLYT_(File_Format)">BRLYT</a>) de dicha pantalla de inicio. Es b&aacute;sicamente lo primero que todos vimos en nuestra primera experiencia con Super Mario Galaxy.</p>        
        <img src="../../images/basic10/info1.jpg" alt="Image could not be loaded.">
        <p class="idtext">Fig. 1: <code>TitleLogo.arc</code> en WiiExplorer</p>
        <p><b>Notas:</b></p>
        <ul>
          <li>Estos archivos TPL no deben ser confundidos (al menos creo que no son lo mismo) que los archivos TPL usados con los archivos BMG para almacenar texto en SMG1.</p>
        </ul>
        <br>
        <p>En esta p&aacute;gina voy a hablar sobre lo que pude ver de las imagenes TPL usadas en el logo ya que muchos podr&aacute;n querer hacer su logo para su modificaci&oacute;n de SMG1 (edici&oacute;n de los archivos <b>BRLAN</b> y <b>BRLYT</b> es algo que no s&eacute; todav&iacute;a pero en algun momento voy a ver si aprendo algo de eso). De todas formas, para empezar, los archivos TPL usados aqu&iacute; son archivos que almacenan imagenes y son similares a los archivos BTI (en el sentido de almacenar informaci&oacute;n sobre imagenes). En <code>TitleLogo.arc</code> hay 10 TPLs con diferentes formatos cada uno, la lista es la siguiente:</b></p>
        <br>
        <p><b>Notas:</b></p>
        <ul>
          <li>Los par&eacute;ntesis a la derecha de cada nombre de cada archivo TPL contiene las dimensiones de la imagen, el formato de la imagen y si dicha imagen es visible en la pantalla de inicio de SMG1 (<code>RMGE01</code>) en el respectivo orden. Cada nombre tiene un enlace asociado con la imagen PNG convertida por wimgt.</p>
        </ul>
        <ul>        
          <li><code><a href="../../images/basic10/MyBase.png">MyBase.tpl</a></code> (8x8, I4, no visible): Literalmente una imagen en blanco. Desconozco su prop&oacute;sito.</li>          
          <li><code><a href="../../images/basic10/MyTitleCopyright.png">MyTitleCopyright.tpl</a></code> (168x24, IA4, visible): Imagen conteniendo la cadena <b>"&#169 2007 Nintendo"</b>.</li>
          <li><code><a href="../../images/basic10/MyTitleLogoBloom.png">MyTitleLogoBloom.tpl</a></code> (288x176, I8, visible): Imagen responsable del efecto de brillo alrededor de la pantalla de inicio cuando se presionan los botones A o B del Wii.</li>          
          <li><code><a href="../../images/basic10/MyTitleLogoJPN.png">MyTitleLogoJPN.tpl</a></code> (328x32, I4, no visible): Imagen conteniendo algo de texto japon&eacute;s (asumo que es japon&acute;es) que no se muestra en pantalla.</li>          
          <li><code><a href="../../images/basic10/MyTitleLogoR.png">MyTitleLogoR.tpl</a></code> (24x16, I4, no visible): Imagen conteniendo el s&iacute;mbolo <b>"&#174"</b>.</li>          
          <li><code><a href="../../images/basic10/MyTitleLogoTM.png">MyTitleLogoTM.tpl</a></code> (24x16, I4, visible): Imagen conteniendo el s&iacute;mbolo <b>"&#8482"</b>.</li>          
          <li><code><a href="../../images/basic10/MyTitleLogo.png">MyTitleLogo.tpl</a></code> (440x256, RGB5A3, visible): El &uacute;nico e inigualable logo de Super Mario Galaxy en casi toda su gloria.</li>          
          <li><code><a href="../../images/basic10/MyTitleMask.png">MyTitleMask.tpl</a></code> (440x96, I4, visible): Imagen conteniendo la "m&aacute;scara" del logo de SMG para la parte que dice "Galaxy". Su prop&oacute;sito es el de mostrar <code>mytitlespace.tpl</code> como si estuviera en las letras de la palabra "Galaxy".</li>          
          <li><code><a href="../../images/basic10/MyTitleSpace.png">MyTitleSpace.tpl</a></code> (512x96, RGB565, visible): Imagen conteniendo una porci&oacute;n del "espacio" que se muestra en las letras de la palabra <b>"Galaxy"</b> del logo.</li>          
          <li><code><a href="../../images/basic10/MyTitleSpeculum.png">MyTitleSpeculum.tpl</a></code> (176x96, I8, visible): Imagen conteniendo el casi indetectable brillo en la parte inferior de las letras "ALAX" de la palabra "Galaxy" en el logo del juego.</li>        
        </ul>        
        <br>        
        <p>De esta forma, si quieres hacer un logo para tu modificaci&oacute;n de SMG, las dimensiones de las imagenes que uses deben ser iguales que las dimensiones de las imagenes originales. Eso s&oacute;lo si quieres conservar los effectos "mask", "speculum" y "space", y si no quieres modificar el archivo BRLYT de la pantalla de inicio.</p>
        <br>
        <p>Para <code>MyTitleLogoBloom.tpl</code> puedes usar el tama&ntilde;o que quieras pero ten en mente que si tu <code>MyTitleLogo.tpl</code> tiene una relaci&oacute;n entre sus dimensiones entonces tu imagen "bloom" tiene que tener una relaci&oacute;n diferente (como se muestra en el diagrama visual de abajo). La imagen <code>MyTitleLogoBloom.tpl</code> tiene una relaci&oacute;n de dimensiones diferente que la de <code>MyTitleLogo.tpl</code> pero la silueta del logo dentro de la misma tiene la misma relaci&oacute;n de dimensi&oacute;n que la imagen <code>MyTitleLogo.tpl</code> (<b>Figs. 2 y 3</b>).</p>

        <img src="../../images/basic10/diag1.jpg" alt="Image could not be loaded.">
        <p class="idtext">Leyenda</p>
        <ul style="margin-left: 25%; width: 50%;">
          <li><b>&Aacute;rea verde:</b> &aacute;rea de la pantalla de inicio.</li>
          <li><b>&Aacute;rea roja:</b> Imagen <code>MyTitleLogoBloom.tpl</code>.</li>
          <li><b>&Aacute;rea azul:</b> Imagen <code>MyTitleLogo.tpl</code>.</li>
        </ul>
        <p class="idtext">Diag. 1: Representaci&oacute;n visual de la ubicaci&oacute;n de <code>MyTitleLogo.tpl</code> y <code>MyTitleLogoBloom.tpl</code> en la pantalla de inicio.</p>
        <img src="../../images/basic10/fig2.jpg" alt="Image could not be loaded.">
        <p class="idtext">Fig. 2: Imagen <code>MyTitleLogoBloom.tpl</code> abierta en GIMP</p>
        <img src="../../images/basic10/fig3.jpg" alt="Image could not be loaded.">
        <p class="idtext">Fig. 3: Imagenes <code>MyTitleLogo.tpl</code> y <code>MyTitleLogoBloom.tpl</code> abiertas en GIMP. A <code>MyTitleLogo.tpl</code> se le redujo la escala en ambas dimensiones uniformemente para llenar el espacio blanco de <code>MyTitleLogoBloom.tpl</code></p>
        <p>Otra cosa que quiero mencionar, la imagen "bloom" realmente se expande en la pantalla de inicio (mira los tama&ntilde;os de <code>MyTitleLogo.tpl</code> y <code>MyTitleLogoBloom.tpl</code>). Es expandida para llenar a su contenedor y eso significa que dicha expansi&oacute;n no va a respetar la relaci&oacute;n de dimensi&oacute;n de la imagen. Puedes probar reemplazando la imagen "bloom"  por una imagen de 1x1 de un pixel blanco (<b>Fig. 4</b>).</p>        
        <img src="../../images/basic10/fig4.jpg" alt="Image could not be loaded.">
        <p class="idtext">Fig. 4: <code>MyTitleLogoBloom.tpl</code> reemplazada por un pixel blanco</p>
        <p>La representaci&oacute;n visual completa de <code>TitleLogo.arc</code> se muestra abajo (est&aacute; exagerado para entender las posiciones) tambi&eacute;n como un gr&aacute;fico de Desmos mostrando el logo de SMG con todas las imagenes en sus respectivas posiciones (visualmente puestas, no con los valores reales que definen sus posiciones en el juego.</p>        
        <img src="../../images/basic10/diag2.jpg" alt="Image could not be loaded.">
        <p class="idtext">Leyenda</p>
        <ul style="margin-left: 25%; width: 50%;">
          <li><b>&Aacute;rea verde:</b> &Aacute;rea de la pantalla de inicio.</li>
          <li><b>&Aacute;rea roja:</b> Imagen <code>MyTitleLogoBloom.tpl</code>.</li>
          <li><b>&Aacute;rea azul:</b> Imagen <code>MyTitleLogo.tpl</code>.</li>
          <li><b>&Aacute;rea amarilla:</b> Imagen <code>MyTitleLogoTM.tpl</code>.</li>
          <li><b>&Aacute;rea rosada:</b> Imagen <code>MyTitleSpace.tpl</code>.</li>
          <li><b>&Aacute;rea naranja:</b> Imagen <code>MyTitleMask.tpl</code>.</li>
          <li><b>&Aacute;rea azul claro:</b> Imagen <code>MyTitleSpeculum.tpl</code>.</li>
          <li><b>&Aacute;rea gris:</b> Imagen <code>MyTitleCopyright.tpl</code>.</li>
        </ul>
        <p class="idtext">Diag 2: Representaci&oacute; visual de todos los TPLs visibles de la pantalla de inicio de SMG)</p>
        <object class="embed" data="https://www.desmos.com/calculator/4ebh0dc4ft?embed"></object>
        <p><b>Notas:</b></p>
        <ul>
          <li>Para convertir un archivo TPL en PNG se puede usar <a href="tb2.html">el mismo procedimiento usado con las imagenes BTI con wimgt</a>. Y para convertir imagenes PNG a TPL se puede usar el mismo comando mencionado en la gu&iacute;a pero usando <code>tpl.[Image Format]</code> en vez de <code>bti.[Image Format]</code>.</p>
        </ul>
        <br>
        <p>Ahora, con la ayuda de esta informaci&oacute;n, espero que puedas pensar en como crear el logo para tu modificaci&oacute;n de SMG!</p>
      </div>
		</div>
	</body>
</html>
